<template>
    <div
      class="login-container"
      style="background-color: #141a48; margin: 0px; overflow: hidden"
    >
      <section class="formbox">
        <el-form
          ref="ruleFormRef"
          :model="ruleForm"
          :rules="rules"
          class="demo-ruleForm"
        >
          <el-form-item prop="name" label="请输入账号：">
            <el-input v-model="ruleForm.name" type="text" autocomplete="off" />
          </el-form-item>
          <el-form-item prop="pwd" label="请输入密码：">
            <el-input v-model="ruleForm.pwd" type="password" autocomplete="off" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="login">登录</el-button>
            <el-button @click="register">注册</el-button>
          </el-form-item>
        </el-form>
      </section>
    </div>
  </template>
  <script lang="ts" setup>
  import { ref, reactive, toRefs } from "vue";
  const validatorPwd = (
    rule: any,
    value: string | undefined,
    cb: (msg?: string) => void
  ) => {
    if (!value) {
      cb("密码不能为空");
    } else {
      cb();
    }
  };
  const state = reactive({
    ruleForm: {
      name: "",
      pwd: "",
    },
    rules: {
      name: [{ required: true, message: "用户名不为空", trigger: "blur" }],
      pwd: [
        {
          validator: validatorPwd,
          trigger: "blur",
          required: true,
        },
      ],
    },
  });
  const { ruleForm, rules } = toRefs(state);
  const ruleFormRef = ref();
  const login = () => {
    console.log(ruleFormRef.value.validate);
    ruleFormRef.value
      .validate()
      .then(() => {
        console.log(ruleForm.value);
      })
      .catch(() => {
        console.log("catch");
      });
  };
  const register = () => {
      console.log(ruleFormRef.value.validate)
      
  };
  </script>
  <style lang="less" scoped>
  @import url("../../style/reset.less");
  .captcodeImage {
    width: 150px;
    /*margin-right: 1.5rem;*/
    padding: 0;
    /*margin: 1px 0;*/
    /*font-size: 1.5rem;*/
    height: 100%;
    border-style: none;
    align-content: flex-start;
    border: none;
    outline: medium;
    cursor: pointer;
    border-style: none;
    text-indent: 10px;
  }
  
  .goto-login-mobile-input {
    width: 100%;
    margin-right: 1.5rem;
    padding: 0;
    /*margin: 1px 0;*/
    /*font-size: 1.5rem;*/
    height: 100%;
    border-style: none;
    align-content: flex-start;
    border: none;
    outline: medium;
    cursor: pointer;
    border-style: none;
    text-indent: 10px;
  }
  
  .loginLine {
    width: 5px;
    height: 26px;
    margin-top: 2px;
    margin-right: 20px;
    margin-left: 70px;
    //   background-image: url("https://lsdkmanager.oss-cn-hangzhou.aliyuncs.com/lsdkzcb/homeLine.png");
    background-size: 100% 100%;
  }
  
  .login-container {
    height: 100vh;
    //   height: 100%;
    //   background-image: url("https://lsdk.oss-cn-hangzhou.aliyuncs.com/GW/baclogoinbg.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    .formbox {
      width: 300px;
      padding: 20px 20px 0 20px;
      background: #eee;
      border-radius: 20px;
      float: right;
      margin-right: 20px;
      vertical-align: middle;
    }
    .login-form {
      position: absolute;
      left: 700px;
      top: 50px;
      right: 0;
      width: 400px;
      padding: 35px 35px 15px 35px;
      padding: 25px 35px 15px 35px;
      margin: 120px auto;
      border: 0px solid gray;
      background: white;
      box-shadow: darkgrey 10px 10px 30px 5px;
    }
  }
  .el-form-item {
    margin-bottom: 18px;
  }
  button {
    padding: 8px 15px;
  }
  </style>
  